<!-- <template lang="html">
  <div class="hello">
    <div class="title">
      <span>订单列表</span>
    </div>
    <div class="content">
      <div class="everyOrder">
        <div class="top">
          <div>
            <img src="" alt="">
            <span>2017.12.29 13:09:09</span>
          </div>
          <span>待付款</span>
        </div>
        <div class="bottom">
          <img :src="test" alt="">
          <div class="right">
            <p class="topP">订单号：12345678</p>
            <p class="centerP">价格：<span style="color: #FF8228;">100元</span></p>
            <p class="bottomP">数量：胶片10张，照片11张</p>
          </div>
        </div>
      </div>

      <div class="everyOrder orderMarginBottom">
        <div class="top">
          <div>
            <img src="" alt="">
            <span>2017.12.29 13:09:09</span>
          </div>
          <span>待付款</span>
        </div>
        <div class="bottom">
          <img :src="test" alt="">
          <div class="right">
            <p class="topP">订单号：12345678</p>
            <p class="centerP">价格：<span style="color: #FF8228;">100元</span></p>
            <p class="bottomP">数量：胶片10张，照片11张</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      test: require('@/common/images/print_record_big_icon@2x.png')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~common/sass/mixin.scss';
.hello{
  .title{
    height: px2rem(128);
    background-color: #2ABBC3;
    color: #fff;
    font-size: px2rem(42);
    text-align: center;
    line-height: px2rem(128);
    font-weight: 700;
    span{
      display: inline-block;
      line-height: 1;
      vertical-align: sub;
    }
  }
  .content{
    background-color: #F0F0F0;
    height: 100vh;
  }
  .orderMarginBottom{
    margin-top: px2rem(22);
  }
  .everyOrder{
    height: px2rem(292);
    box-sizing: border-box;
    padding: 0 px2rem(30);
    background-color: #fff;
    .top{
      height: px2rem(88);
      justify-content: space-between;
      border-bottom: 1px solid #E9E9E9;
      display: flex;
      justify-content:space-between;
      span:nth-child(1){
        font-family: PingFangSC-Regular;
        font-size: px2rem(28);
        color: #909090;
        letter-spacing: 0;
        line-height: px2rem(88);
      }
      span:nth-child(2){
        font-family: PingFangSC-Regular;
        font-size: px2rem(28);
        color: #FF8228;
        letter-spacing: 0;
        line-height: px2rem(88);
      }
    }
    .bottom{
      padding-top: px2rem(40);
      display: flex;
      img{
        width: px2rem(128);
        height: px2rem(128);
      }
      .right{
        margin-left: px2rem(30);
        font-family: PingFangSC-Regular;
        font-size: px2rem(28);
        letter-spacing: 0;
        color: #909090;
        .topP{
          line-height: 1;
        }
        .centerP{
          line-height: px2rem(68);
        }
        .bottomP{
          line-height: 1;
        }
      }
    }
  }
}
</style> -->
